<template>
  <el-dialog  :visible.sync="display.show" fullscreen @open="visiableChange" class="detail-dialog-cls" :show-close="false">
    <div class="header-Contain" slot="title">
      <div class="header-con-title">
        <span style="display: block">{{data.name}}</span>
        <div class="statusCls">{{chStatus}}<span :class="processMark"></span></div>
      </div>
      <i class="el-icon-close closed-icon" @click="display.show=false" />
    </div>
    <div class="topContain">
      <div class="top-env-monitor">
        <detail-chart2 :mdata="left_option0" v-if="chartVisiable"  />
      </div>
      <dv-decoration-2 :color="borderColor" class="decoration-1" :reverse="true"  style="width:5px;height: 100%" v-if="chartVisiable" />
      <div class="top-total-data">
        <el-row>时间:{{currentDtm}}</el-row>
        <el-row class="row-cls">
          <el-col class="col-cls"></el-col>
          <el-col class="col-cls"><span class="col-span-cls">本月计划</span></el-col>
          <el-col class="col-cls"><span class="col-span-cls">实际执行</span></el-col>
        </el-row>
        <el-row class="row-cls" v-for="(item, i) in total_data" :key="i">
          <el-col class="col-cls"><span class="col-span-cls">{{item.name}}</span></el-col>
          <el-col class="col-cls"><span class="col-span-cls">{{item.target_val}}</span></el-col>
          <el-col class="col-cls"><span class="col-span-cls">{{item.rel_val}}</span></el-col>
        </el-row>
      </div>
    </div>
    <div class="BottomContain">
      <div class="cellPannel">
        <detail-chart1 :mdata="left_option1" v-if="chartVisiable" class="chart-cell" />
      </div>
      <div class="cellPannel">
        <detail-chart1 :mdata="left_option2" v-if="chartVisiable" class="chart-cell" />
      </div>
    </div>

  </el-dialog>

</template>

<script>
  import chartConfig from "./js/chartConfig";
  import DetailChart1 from "./DetailChart1";
  import DetailChart2 from "./DetailChart2";
  import {parseTime} from "@/utils";

    export default {
        name: "FactoryIndex",
        components: {
          DetailChart1,
          DetailChart2
        },
        props:{
          display:{
            require:true,
            type:Object,
          },
          data:{
            require:true,
            type:Object
          }

        },
        data(){
          let date = new Date();
          date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
          return {
            borderColor:['#b4bccc','#b4bccc'],
            chartVisiable:false,
            currentDtm:'',
            total_data:[],
            left_option0:{},
            left_option1:{},
            left_option2:{},
            isLoading: true
          }
        },
        mounted() {
          setInterval(function() {
            let curTm = new Date();
            this.currentDtm = parseTime(curTm,'{y}-{m}-{d} {h}:{i}:{s}');
          }, 1000);
          const option0_data={
            title:'',
            unit:'吨',
            names:['污水处理量'],
            xData:[
              '2022-10-01',
              '2022-10-02',
              '2022-10-03',
              '2022-10-04',
              '2022-10-05'],
            yData:[
              [100,192,185,162,152]
            ],
          }
          this.left_option0 = option0_data

          this.total_data =[
            {name:'N2O',target_val:'11',rel_val:'1'},
            {name:'HNO',target_val:'333',rel_val:'22'},
            {name:'SO2',target_val:'42',rel_val:'2'},
            {name:'SO4',target_val:'64',rel_val:'33'},
            {name:'NX3OX',target_val:'33',rel_val:'3'}
            ]
          const option1_data= {
            title:'',
            unit:'KMW',
            names:['发电量'],
            xData:[
              '2022-10-01',
              '2022-10-02',
              '2022-10-03',
              '2022-10-04',
              '2022-10-05'],
            yData:[
              [89,76,71,92,83]
            ]
          }
          this.left_option1 = option1_data;
          const option2_data= {
            title:'',
            unit:'KMW',
            names:['上网电量'],
            xData:[
              '2022-10-01',
              '2022-10-02',
              '2022-10-03',
              '2022-10-04',
              '2022-10-05'],
            yData:[
              [232,195,180,200,175]
            ]

          }
          this.left_option2 = option2_data;
          this.chartVisiable=true
        },
        computed:{
          chStatus(){
            let statName='运行中';
            if (this.data.status==='inactive'){
              statName='停运';
            }else if (this.data.status==='build'){
              statName='在建中';
            }
            return statName;
          },
          processMark(){
            return this.data?this.data.status:'active';
          }
        },
        methods:{
          visiableChange(){

          },
        }
    }
</script>

<style lang="scss">
    .detail-dialog-cls .el-dialog.is-fullscreen {
      background: #000000;
    }

    .titleCls{
      font-weight: bold;
      font-size: medium;
    }

    .statusCls{
      margin-left: 80px;
      font-size: x-small;
      display: flex;
      align-items: center;

      span{
        width: 15px;
        height: 15px;
        display: block;
        margin-left: 5px;
      }
      .active {
        background-color: #4cd964;
      }

      .inactive {
        background-color: #ed4014;
      }

      .build {
        background-color: #b4bccc;
      }

    }

    .header-Contain{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
      color: #b4bccc;

      .header-con-title{
        display: flex;
        flex-direction: row;
      }
      .closed-icon{
        position: absolute;
        right: 10px;
        cursor: pointer;
        color: #ed4014;
        font-size: 50px;
      }
    }

    .topContain{
      width: 100%;
      height: 500px;
      margin-top: 5px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;


      .top-env-monitor {
        width: 75%;
        height: 100%;
        padding: 5px;
      }
      .top-total-data{
        width: 25%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        color: #b4bccc;
        display: flex;
        flex-direction: column;
        justify-items: center;

        .row-cls{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 20px;

          .col-cls{
            flex: 1;
            justify-content: center;

            .col-span-cls{
              font-weight: bold;
            }
          }

        }

      }

    }

    .BottomContain{
      width: 100%;
      display: flex;
      margin-top: 10px;

      .cellPannel{
        width: 50%;
        height: 350px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;


        .chart-cell{
          height: 100%;
        }
      }

    }
    .decoration-1, .decoration-2, .decoration-3 {
        display: flex;
        left: 0;
    }
</style>
